<template>
<!-- 右侧窗口数据预览部分视图 -->
  <div class="drawer-data-preview">
    <a-icon-font v-show="dataset.length > 0" class="btn-zoom" type="iconfangda"  @click="zoomTable"/>
    <a-table class="table-style" :columns="columns" :data-source="dataset" :pagination="false" :scroll="{ x: 150, y: 120}" >
      <template v-for="(col, index) in columns" :slot="col.key">
        <div :key="index">
          <span>{{col.key}}</span>
        </div>
      </template>
    </a-table>

    <!-- 数据详情    -->
    <node-data-preview
      :current-info="currentDataInfo"
      :info-visible="zoomDialogVisible"
      @close-preview="zoomDialogVisible = false"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Watch } from 'vue-property-decorator'
import { infoData, nodeDataPreview } from '@/api/right-drawer'
import DataViewStore from '@/store/modules/dataview'
import NodeDataPreview from '@/components/studio/data/panel/NodeDataPreview.vue'

@Component({
  components: {
    NodeDataPreview
  }
})
export default class DataPreview extends Vue {

  @Watch('selectNode')
  public async testApi() {
    if (!this.selectNode) {
      return
    }
    if(this.selectNode.type === 3) {
      this.checkDataInfo()
    } else {
      this.checkDataInfo2()
    }
  }

  public get selectNode(): any {
    return DataViewStore.selectNode
  }

  public zoomDialogVisible:boolean = false

  public currentDataInfo:any = []

  // 数据节点预览数据
  public async checkDataInfo() {
    this.columns = []
    this.dataset = []
    const response = await infoData({data: {datasetId: this.selectNode.data.dataset_id, projectId: this.selectNode.projectId}})
    DataViewStore.setDatasetName('数据集名称:'.concat(response.data.result.name))
    this.currentDataInfo = response.data.result ? [response.data.result] : []
    for(let i=0;i<response.data.result.head.length;i+=1) {
      const column = {
        width: 120,
        dataIndex: response.data.result.head[i].name,
        key: response.data.result.head[i].name,
        slots: {title: response.data.result.head[i].name},
        type: response.data.result.head[i].type,
      }
      this.columns.push(column)
    }
    for(let i=0;i<response.data.result.data.length;i+=1) {
      const data = response.data.result.data[i]
      data.key = String(i+1)
      this.dataset.push(data)
    }
  }

  // 其他节点预览数据
  public async checkDataInfo2() {
    this.columns = []
    this.dataset = []
    const response = await nodeDataPreview({data: {id: this.selectNode.id, pipelineId: this.selectNode.pipelineId}})
    DataViewStore.setDatasetName('节点名称:'.concat(this.selectNode.name))
    if (response.data.result.length === 0) {
      return
    }
    this.currentDataInfo = response.data.result
    for(let i=0;i<response.data.result[0].head.length;i+=1) {
      const column = {
        width: 80,
        dataIndex: response.data.result[0].head[i].name,
        key: response.data.result[0].head[i].name,
        slots: {title: response.data.result[0].head[i].name},
        type: response.data.result[0].head[i].type,
      }
      this.columns.push(column)
    }
    for(let i=0;i<response.data.result[0].data.length;i+=1) {
      const data = response.data.result[0].data[i]
      data.key = String(i+1)
      this.dataset.push(data)
    }
  }

  public columns: any = []
  public dataset: any = []

  public zoomTable() {
    this.zoomDialogVisible = true
  }
}
</script>

<style lang="less" scoped>

  .drawer-data-preview {
    margin-bottom: 20px;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 8px;
    position: relative;

    .btn-zoom {
      cursor: pointer;
      font-size: 16px;
      left: 90px;
      position: absolute;
      top: -33px;
    }

    /deep/ .ant-table-thead > tr > th,
    /deep/ .ant-table-tbody > tr > td {
      padding: 6px;
    }
  }


  .table-style {
    border: 1px solid;
    border-color: #ededf4;
  }

</style>
